
function Light($box) {  
  // 装图片容器
  this.box = document.querySelector($box);
  this.arrowLeft = document.querySelector('.arrow-left');
  this.arrowRight = document.querySelector('.arrow-right');
  this.dotbox = document.querySelectorAll(".dot-box>span");
  console.log(this.dotbox);
  this.arrowLeft.innerHTML="&gt;";
  this.arrowRight.innerHTML="&gt;";

  // 初始值  
  this.index = 1;  
  this.timer;  


  // 保留上一张图片
  this.lastIndex = 1;
}  

// 初始化图片方法  
Light.prototype.init = function () {  
  console.log('初始化图片');  
  this.img = new Image();   
  this.img.draggable = false;  
  this.img.src = `./img/0${this.index}.jpeg`;  
  this.box.appendChild(this.img); 
   //绑定下一张点击事件
   this.arrowRightFn(); 
  // 轮播效果
  this.carousel(); 
}; 
// 点击给添加下一张图片
Light.prototype.arrowRightFn = function(){
  this.arrowRight.addEventListener("click", function(){
    console.log("下一张");
    this.index ++;
    this.img.src = `./img/0${this.index}.jpeg`;

  })

};

// 轮播
Light.prototype.carousel = function () {
  Light.prototype.timer=setInterval(()=>{
    this.index += 1;
    if(this.index > 4){
      this.index = 1;
    }
    this.img.src = `./img/0${this.index}.jpeg`; 
},2000);
};

this.dotbox.forEach((el, elIndex) => {
  el.addEventListener('click', () => {
    // 获取当前点击的小圆点下标, 更换index的值就就可以实现轮播图和小圆点下标一致
    index = elIndex;
    // 更改激活类名
    changeActive();
  });
});

// changeActive 函数, 主要功能是修改激活类名

function changeActive() {
  // 先移除上一张li的激活类名 li-active (当前激活对象更换了)
  list[lastIndex].classList.remove('li-active');
  // 小圆点的激活类
  dots[lastIndex].classList.remove('dot-active');

  // 更换激活对象
  list[index].classList.add('li-active');
  dots[index].classList.add('dot-active');

  // 更新上一次的值lastIndex
  lastIndex = index;
}

